<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>

    <title>Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="static/bootstrap-5.1.3-dist/bootstrap.min.css" rel="stylesheet">
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>
    <link href="static/css/admin.css" rel="stylesheet">
    <script src="static/js/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        function selectAllCustomer() {
            $.ajax({
                url: "selectAllCustomer",
                type: "post",
                data: JSON.stringify({}),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        json2table(data);
                    }
                }
            });
        }

        function selectByCustomerName()  {
            var name = $('#selectByName').val();
            if ( name === "") {
                failMsgAlert("客户名称为空,无响应");
                selectAllCustomer();
                return false;
            }
            $.ajax({
                url: "selectByCustomerName",
                type: "post",
                data: JSON.stringify({
                    name : name
                }),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        succMsgAlert("查询到了"+Object.keys(data).length+"条数据!");
                        json2table(data);
                    }
                }
            });
        }

        function selectByCustomerMobile()  {
            var mobile = $('#selectByMobile').val();
            if ( mobile === "") {
                failMsgAlert("客户名称为空,无响应");
                selectAllCustomer();
                return false;
            }
            $.ajax({
                url: "selectByCustomerMobile",
                type: "post",
                data: JSON.stringify({
                    mobile : mobile
                }),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        succMsgAlert("查询到了"+Object.keys(data).length+"条数据!");
                        json2table(data);
                    }
                }
            });
        }

        function getUpdateCustomerInfo() {
            var index = event.srcElement.parentElement.parentElement.rowIndex;
            var id = document.getElementById("customer-table").rows[index].cells[0].innerText;
            var name = document.getElementById("customer-table").rows[index].cells[1].innerText;
            var userId = document.getElementById("customer-table").rows[index].cells[2].innerText;
            var createId = document.getElementById("customer-table").rows[index].cells[3].innerText;
            var source = document.getElementById("customer-table").rows[index].cells[4].innerText;
            var industry = document.getElementById("customer-table").rows[index].cells[5].innerText;
            var level = document.getElementById("customer-table").rows[index].cells[6].innerText;
            var linkman = document.getElementById("customer-table").rows[index].cells[7].innerText;
            var phone = document.getElementById("customer-table").rows[index].cells[8].innerText;
            var mobile = document.getElementById("customer-table").rows[index].cells[9].innerText;
            var zipcode = document.getElementById("customer-table").rows[index].cells[10].innerText;
            var address = document.getElementById("customer-table").rows[index].cells[11].innerText;

            $('#UpdateCustomerId').val(id);
            $('#UpdateCustomerName').val(name);
            $('#UpdateUserId').val(userId);
            $('#UpdateCreateId').val(createId);
            $('#UpdateSource').val(source);
            $('#UpdateIndustry').val(industry);
            $('#UpdateLevel').val(level);
            $('#UpdateLinkman').val(linkman);
            $('#UpdatePhone').val(phone);
            $('#UpdateMobile').val(mobile);
            $('#UpdateZipcode').val(zipcode);
            $('#UpdateAddress').val(address);
        }

        function getDeleteCustomerInfo() {

            var index = event.srcElement.parentElement.parentElement.rowIndex;
            var id = document.getElementById("customer-table").rows[index].cells[0].innerText;
            var name = document.getElementById("customer-table").rows[index].cells[1].innerText;
            var userId = document.getElementById("customer-table").rows[index].cells[2].innerText;
            var createId = document.getElementById("customer-table").rows[index].cells[3].innerText;
            var source = document.getElementById("customer-table").rows[index].cells[4].innerText;
            var industry = document.getElementById("customer-table").rows[index].cells[5].innerText;
            var level = document.getElementById("customer-table").rows[index].cells[6].innerText;
            var linkman = document.getElementById("customer-table").rows[index].cells[7].innerText;
            var phone = document.getElementById("customer-table").rows[index].cells[8].innerText;
            var mobile = document.getElementById("customer-table").rows[index].cells[9].innerText;
            var zipcode = document.getElementById("customer-table").rows[index].cells[10].innerText;
            var address = document.getElementById("customer-table").rows[index].cells[11].innerText;
            var createTime = document.getElementById("customer-table").rows[index].cells[12].innerText;

            $('#DeleteCustomerId').val(id);
            $('#DeleteCustomerName').val(name);
            $('#DeleteUserId').val(userId);
            $('#DeleteCreateId').val(createId)
            $('#DeleteSource').val(source);
            $('#DeleteIndustry').val(industry);
            $('#DeleteLevel').val(level);
            $('#DeleteLinkman').val(linkman);
            $('#DeletePhone').val(phone);
            $('#DeleteMobile').val(mobile);
            $('#DeleteZipcode').val(zipcode);
            $('#DeleteAddress').val(address);
            $('#DeleteCreateTime').val(createTime);
        }

        function json2table(data) {
            var trs = "";
            var tbody = $("#customer-tbody");
            tbody.empty()
            $.each(data, function (n, value) {
                trs +="<tr><td>" +
                    value.id +
                    "</td><td>" +
                    value.name +
                    "</td><td>" +
                    value.userId +
                    "</td><td>" +
                    value.createId+
                    "</td><td>" +
                    value.source +
                    "</td><td>" +
                    value.industry +
                    "</td><td>" +
                    value.level +
                    "</td><td>" +
                    value.linkman+
                    "</td><td>" +
                    value.phone +
                    "</td><td>" +
                    value.mobile +
                    "</td><td>" +
                    value.zipcode +
                    "</td><td>" +
                    value.address+
                    "</td><td>" +
                    new Date(value.createTime)+
                    "</td><td>" +
                    "<button type=\"button\" class=\"btn btn-primary\" " +
                    "onclick=\"getUpdateCustomerInfo()\" data-bs-toggle=\"modal\" data-bs-target=\"#UpdateCustomerModal\"" + ">"
                    +"修改</button>" +
                    "<button type=\"button\" class=\"btn btn-primary\" " +
                    "onclick=\"getDeleteCustomerInfo()\" data-bs-toggle=\"modal\" data-bs-target=\"#DeleteCustomerModal\"" + ">"
                    +"删除</button>" +
                    "</td></tr>";
            });
            tbody.append(trs);
        }

        function updateCustomer() {
            var id = $('#UpdateCustomerId').val();
            var name = $('#UpdateCustomerName').val();
            var userId = $('#UpdateUserId').val();
            var createId = $('#UpdateCreateId').val();
            var source = $('#UpdateSource').val();
            var industry = $('#UpdateIndustry').val();
            var level = $('#UpdateLevel').val();
            var linkman = $('#UpdateLinkman').val();
            var phone = $('#UpdatePhone').val();
            var mobile = $('#UpdateMobile').val();
            var zipcode = $('#UpdateZipcode').val();
            var address = $('#UpdateAddress').val();
            $.ajax({
                url: "updateCustomer",
                type: "post",
                data: JSON.stringify({
                    id : id,
                    name : name,
                    userId : userId,
                    createId : createId,
                    source : source,
                    industry : industry,
                    level : level,
                    linkman : linkman,
                    phone : phone,
                    mobile : mobile,
                    zipcode : zipcode,
                    address : address,
                }),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (data) {
                    if (data != false) {
                        succMsgAlert("完成修改!");
                        ReFreshCurrentPage();
                    }
                }
            });
        }

        function addCustomer() {
            var id = $('#AddCustomerId').val();
            var name = $('#AddCustomerName').val();
            var userId = $('#AddUserId').val();
            var createId = $('#AddCreateId').val();
            var source = $('#AddSource').val();
            var industry = $('#AddIndustry').val();
            var level = $('#AddLevel').val();
            var linkman = $('#AddLinkman').val();
            var phone = $('#AddPhone').val();
            var mobile = $('#AddMobile').val();
            var zipcode = $('#AddZipcode').val();
            var address = $('#AddAddress').val();
            $.ajax({
                url: "addCustomer",
                type: "post",
                data: JSON.stringify({
                    id : id,
                    name : name,
                    userId : userId,
                    createId : createId,
                    source : source,
                    industry : industry,
                    level : level,
                    linkman : linkman,
                    phone : phone,
                    mobile : mobile,
                    zipcode : zipcode,
                    address : address,
                }),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (data) {
                    if (data != false) {
                        succMsgAlert("添加成功!");
                        ReFreshCurrentPage();
                    } else {
                        failMsgAlert("添加失败!");
                    }
                }
            });
        }

        function deleteCustomer() {
            var id = $('#DeleteCustomerId').val();
            $.ajax({
                url: "deleteCustomer",
                dataType:"JSON",
                type: "post",
                data: JSON.stringify({
                    id: id
                }),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (data) {
                    if (data != false) {
                        succMsgAlert("删除成功");
                        ReFreshCurrentPage()
                    }
                }
            });
        }

        function selectCustomerByPage(idx) {
            var size = 2;
            var beginIdx = (idx-1) * size;
            $.ajax({
                url: "CustomerPage",
                type: "post",
                data: JSON.stringify({
                    idx : idx,
                    size : size,
                    beginIdx : beginIdx
                }),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        json2table(data);
                        managePage(Object.keys(data).length < size, idx);
                    }
                }
            });
        }

        function succMsgAlert(str) {
            var stradd = "<div class=\"alert alert-success alert-dismissible\">" +
                "<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\"></button>" +
                "<strong>成功!</strong>" + str + "</div>"
            var alert = $('#msg-alert');
            alert.empty();
            alert.append(stradd);

        }

        function failMsgAlert(str) {
            var stradd = "<div class=\"alert alert-danger alert-dismissible\">" +
                "<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\"></button>" +
                "<strong>失败!</strong>" + str + "</div>"
            var alert = $('#msg-alert');
            alert.empty();
            alert.append(stradd);
            // window.setTimeout(function () {
            //     $('#msg-alert').empty();
            // }, 2000);
        }

        function validIn() {
            var btn = $('#addCustomerBtn');
            btn.attr("disabled",true);
            btn.empty();
            btn.append("必填项中输入了空");
            if ($("#AddCustomerName").val()!=="" && $("#AddUserId").val()!=="" && $("#AddCreateId").val()!==""
                && $("#AddLevel").val()!==""&& $("#AddLinkman").val()!==""&& $("#AddMobile").val()!==""
                && $("#AddAddress").val()!=="")
            {
                btn.empty();
                btn.append("确定");
                btn.removeAttr("disabled");
            }
        }

        function UpdValidIn() {
            var btn = $('#UpdateCustomerBtn');
            btn.attr("disabled",true);
            btn.empty();
            btn.append("必填项中输入了空");
            if ($("#UpdateCustomerName").val()!=="" && $("#UpdateUserId").val()!=="" && $("#UpdateCreateId").val()!==""
                && $("#UpdateLevel").val()!==""&& $("#UpdateLinkman").val()!==""&& $("#UpdateMobile").val()!==""
                && $("#UpdateAddress").val()!=="")
            {
                btn.empty();
                btn.append("确定");
                btn.removeAttr("disabled");
            }
        }

        function managePage(isLessThanSize, idx) {
            for (i = 0; i <= 6; i++){
                var t = $('#li'+i);
                t.removeClass('active');
                t.removeAttr('disabled');
            }
            var text; var activeIdx;
            if (idx >= 4)
            {
                activeIdx = 3;
                text = [idx-2,idx-1,idx,idx+1,idx+2];
            }
            else {
                activeIdx = idx;
                text = [1,2,3,4,5];
            }
            for (i = 1; i <= 5; i++) {
                $('#li'+i).text(text[i-1]);
            }
            $('#li'+activeIdx).addClass('active');
            if (activeIdx === 1) $('#li0').attr('disabled',true);
            if (isLessThanSize) {
                for (i = activeIdx+1; i <= 6; i++) {
                    $('#li'+i).attr('disabled',true);
                }
            }
        }

        function pageItemCall() {
            var idx = event.srcElement.innerText;
            if (idx === "上一页") {
                for (i = 1; i <= 5; i++) {
                    if ($('#li'+i).hasClass('active')) {
                        selectCustomerByPage(parseInt($('#li'+i).text())-1);
                        return;
                    }
                }
            }
            if (idx=== "下一页") {
                for (i = 1; i <= 5; i++) {
                    if ($('#li'+i).hasClass('active')) {
                        selectCustomerByPage(parseInt($('#li'+i).text())+1);
                        return;
                    }
                }
            }
            selectCustomerByPage(parseInt(idx));
        }

        function ReFreshCurrentPage() {
            for (i = 1; i <= 5; i++) {
                if ($('#li'+i).hasClass('active')) {
                    selectCustomerByPage(parseInt($('#li'+i).text()));
                    return;
                }
            }
        }
    </script>

</head>
<body onload="selectCustomerByPage(1)">

<div class="admin-panel scrollarea container-fluid border">

    <div id="msg-alert" class="mt-3 mb-3">
        <div class="alert alert-info alert-dismissible">
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            <strong>信息!</strong> 请注意这个信息。
        </div>
    </div>
    <!-- 模态框 -->
    <div class="container mt-3 text-center">

        <h3>用户管理</h3>
        <form action="logout" method="post" >
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#AddCustomerModal">
                添加客户
            </button>
            <button type="button" class="btn btn-primary" onclick="ReFreshCurrentPage()">
                刷新按钮
            </button>
            <button type="submit" class="btn btn-primary" >
                退出登录
            </button>
        </form>
    </div>

    <div class="container mt-3">
        <form action="">
            <div class="row">
                <div class="input-group col">
                    <span class="input-group-text">姓名查询</span>
                    <input type="text" id="selectByName" class="form-control" placeholder="Enter name" name="name">
                </div>
                <div class="col">
                    <button type="button" onclick="selectByCustomerName()" class="btn btn-primary">
                        查询客户
                    </button>
                </div>
            </div>
        </form>
    </div>

    <div class="container mt-3">
        <form action="">
            <div class="row">
                <div class="input-group col">
                    <span class="input-group-text">移动电话查询</span>
                    <input type="text" id="selectByMobile" class="form-control" placeholder="Enter mobile" name="mobile">
                </div>
                <div class="col">
                    <button type="button" onclick="selectByCustomerMobile()" class="btn btn-primary">
                        查询客户
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!--        修改-->
    <div class="modal fade" id="UpdateCustomerModal">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">修改客户</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!-- 模态框内容 -->
                <div class="modal-body">
                    <div><!--form-->
                        <div class="form-floating">
                            <input type="text" class="form-control" id="UpdateCustomerId"
                                   placeholder="Enter CustomerId" readonly>
                            <label id="label" for="UpdateCustomerId">客户编号</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="UpdateCustomerName" oninput="UpdValidIn()"
                                   placeholder="Enter CustomerName">
                            <label id="updnamelabel" for="UpdateCustomerName">客户名称</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="UpdateUserId" oninput="UpdValidIn()"
                                   placeholder="Enter UserId">
                            <label id="upduseridlabel" for="UpdateUserId">负责人id</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="UpdateCreateId" oninput="UpdValidIn()"
                                   placeholder="Enter CreateId">
                            <label id="updcreateidlabel" for="UpdateCreateId">创建人id</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="UpdateSource" oninput="UpdValidIn()"
                                   placeholder="Enter Source">
                            <label id="updsource" for="UpdateSource">客户信息来源</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="UpdateIndustry" oninput="UpdValidIn()"
                                   placeholder="Enter Industry">
                            <label id="updindustry" for="UpdateIndustry">客户所属行业</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="UpdateLevel" oninput="UpdValidIn()"
                                   placeholder="Enter Level">
                            <label id="updlevel" for="UpdateLevel">客户级别</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="UpdateLinkman" oninput="UpdValidIn()"
                                   placeholder="Enter Linkman">
                            <label id="updlinkman" for="UpdateLinkman">联系人</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="UpdatePhone" oninput="UpdValidIn()"
                                   placeholder="Enter Phone">
                            <label id="updphone" for="UpdatePhone">固定电话</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="UpdateMobile" oninput="UpdValidIn()"
                                   placeholder="Enter Mobile">
                            <label id="updmobile" for="UpdateMobile">移动电话</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="UpdateZipcode" oninput="UpdValidIn()"
                                   placeholder="Enter Zipcode">
                            <label id="updzipcode" for="UpdateZipcode">邮政编码</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="UpdateAddress" oninput="UpdValidIn()"
                                   placeholder="Enter Address">
                            <label id="updaddress" for="UpdateAddress">联系地址</label>
                        </div>
                        <div class="d-grid">
                            <button id="UpdateCustomerBtn" type="button" disabled onclick="updateCustomer()"
                                    class="btn btn-primary btn-block" data-bs-dismiss="modal">确定
                            </button>
                        </div>
                    </div>
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!--        删除-->
    <div class="modal fade" id="DeleteCustomerModal">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">删除用户</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!-- 模态框内容 -->
                <div class="modal-body">
                    <div><!--form-->
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="DeleteCustomerId" placeholder="Enter CustomerId"
                                   readonly>
                            <label for="DeleteCustomerId">客户编号</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="DeleteCustomerName" placeholder="Enter CustomerName">
                            <label for="DeleteCustomerName">客户名称</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="DeleteUserId" placeholder="Enter UserId">
                            <label for="DeleteUserId">负责人id</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="DeleteCreateId" placeholder="Enter CreateId">
                            <label for="DeleteCreateId">创建人id</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="DeleteSource" placeholder="Enter Source">
                            <label for="DeleteSource">客户信息来源</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="DeleteIndustry" placeholder="Enter Industry">
                            <label for="DeleteIndustry">客户所属行业</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="DeleteLevel" placeholder="Enter Level">
                            <label for="DeleteLevel">客户级别</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="DeleteLinkman" placeholder="Enter Linkman">
                            <label for="DeleteLinkman">联系人</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="DeletePhone" placeholder="Enter Phone">
                            <label for="DeletePhone">固定电话</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="DeleteMobile" placeholder="Enter Mobile">
                            <label for="DeleteMobile">移动电话</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="DeleteZipcode" placeholder="Enter Zipcode">
                            <label for="DeleteZipcode">邮政编码</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="DeleteAddress" placeholder="Enter Address">
                            <label for="DeleteAddress">联系地址</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="DeleteCreateTime" placeholder="Enter CreateTime">
                            <label for="DeleteCreateTime">创建时间</label>
                        </div>

                        <div class="d-grid">
                            <button type="button" onclick="deleteCustomer()" class="btn btn-primary btn-block"
                                    data-bs-dismiss="modal">确定删除
                            </button>
                        </div>
                    </div>
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!--        增加-->
    <div class="modal fade" id="AddCustomerModal">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">添加用户</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!-- 模态框内容 -->
                <div class="modal-body">
                    <div><!--form-->
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="AddCustomerName" oninput="validIn()"
                                   placeholder="Enter CustomerName">
                            <label id="namelabel" for="AddCustomerName">客户名称</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="AddUserId" oninput="validIn()"
                                   placeholder="Enter UserId">
                            <label id="useridlabel" for="AddUserId">负责人id</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="AddCreateId" oninput="validIn()"
                                   placeholder="Enter CreateId">
                            <label id="createidlabel" for="AddCreateId">创建人id</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="AddSource" oninput="validIn()"
                                   placeholder="Enter Source">
                            <label id="sourcelabel" for="AddSource">客户信息来源</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="AddIndustry" oninput="validIn()"
                                   placeholder="Enter Industry">
                            <label id="industrylabel" for="AddIndustry">客户所属行业</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="AddLevel" oninput="validIn()"
                                   placeholder="Enter Level">
                            <label id="levellabel" for="AddLevel">客户级别</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="AddLinkman" oninput="validIn()"
                                   placeholder="Enter Linkman">
                            <label id="linkmanlabel" for="AddLinkman">联系人</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="AddPhone" oninput="validIn()"
                                   placeholder="Enter Phone">
                            <label id="phonelabel" for="AddPhone">固定电话</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="AddMobile" oninput="validIn()"
                                   placeholder="Enter Mobile">
                            <label id="mobilelabel" for="AddMobile">移动电话</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="AddZipcode" oninput="validIn()"
                                   placeholder="Enter Zipcode">
                            <label id="zipcodelabel" for="AddZipcode">邮政编码</label>
                        </div>
                        <div class="form-floating mb-3 mt-3">
                            <input type="text" class="form-control" id="AddAddress" oninput="validIn()"
                                   placeholder="Enter Address">
                            <label id="addresslabel" for="AddAddress">联系地址</label>
                        </div>
                        <div class="d-grid">
                            <button id="addCustomerBtn" type="button" disabled onclick="addCustomer()"
                                    class="btn btn-primary btn-block" data-bs-dismiss="modal">添加
                            </button>
                        </div>
                    </div>
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!--        用户表-->
    <div class="container mt-3">
        <h2 class="text-center mt-3 mb-3">客户表</h2>
        <table class="table table-hover" id="customer-table">
            <thead class="table-light">
            <tr>
                <th>客户编号</th>
                <th>客户名称</th>
                <th>负责人id</th>
                <th>创建人id</th>
                <th>客户信息来源</th>
                <th>客户所属行业</th>
                <th>客户级别</th>
                <th>联系人</th>
                <th>固定电话</th>
                <th>移动电话</th>
                <th>邮政编码</th>
                <th>联系地址</th>
                <th>创建时间</th>
            </tr>
            </thead>
            <tbody id="customer-tbody">
            </tbody>
        </table>
    </div>

    <!-- 分页按钮 -->
    <div class="container mt-3 text-center">
        <div class="btn-group">
            <button type="button" id="li0" onclick="pageItemCall()" class="btn btn-outline-primary">上一页</button>
            <button type="button" id="li1" onclick="pageItemCall()" class="btn btn-outline-primary">1</button>
            <button type="button" id="li2" onclick="pageItemCall()" class="btn btn-outline-primary">2</button>
            <button type="button" id="li3" onclick="pageItemCall()" class="btn btn-outline-primary">3</button>
            <button type="button" id="li4" onclick="pageItemCall()" class="btn btn-outline-primary">4</button>
            <button type="button" id="li5" onclick="pageItemCall()" class="btn btn-outline-primary">5</button>
            <button type="button" id="li6" onclick="pageItemCall()" class="btn btn-outline-primary">下一页</button>
        </div>
    </div>
</div>
<script src="static/bootstrap-5.1.3-dist/bootstrap.bundle.min.js"></script>
</main>
</body>
</html>
